<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>hover按钮切换文字</title>
    </head>

    <body class="flex min-h-screen w-full items-center justify-center bg-gray-900 text-white">
        <div id="app" class="flex items-center justify-center gap-10">
            <div
                style="--color: rgba(255, 0, 0, 0.7)"
                class="group overflow-hidden rounded-full border-2 border-solid border-[var(--color)] bg-transparent px-8 py-4 text-2xl text-[var(--color)] [text-shadow:0_3rem_#fff] hover:bg-[var(--color)] hover:text-white hover:shadow-[0_0_25px_var(--color),0_0_100px_var(--color)]">
                Hover Me
            </div>
            <div
                style="--color: rgba(255, 250, 0, 0.7)"
                class="group overflow-hidden rounded-full border-2 border-solid border-[var(--color)] bg-transparent px-8 py-4 text-2xl text-[var(--color)] [text-shadow:0_3rem_#fff] hover:bg-[var(--color)] hover:text-white hover:shadow-[0_0_25px_var(--color),0_0_100px_var(--color)]">
                Button
            </div>
            <div
                style="--color: rgba(0, 250, 0, 0.7)"
                class="group overflow-hidden rounded-full border-2 border-solid border-[var(--color)] bg-transparent px-8 py-4 text-2xl text-[var(--color)] [text-shadow:0_3rem_#fff] hover:bg-[var(--color)] hover:text-white hover:shadow-[0_0_25px_var(--color),0_0_100px_var(--color)]">
                Green Button
            </div>
        </div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>
